<template>
	<view class="page">
		<view class="block"  v-for="(item,index) in noiseData" :key="index" @click="toTrain(item)">
			<image :src="item.icon_url" alt="" class="test-pic"></image>
			<view class="test-info">
				<view class="test-name">{{item.title}}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ccc;">{{parseInt(item.audio_duration/60)}}分钟</span></view>
				<view class="test-des line3">{{item.intro}}</view>
			</view>
			<view class="start">开始训练</view>
		</view>
	</view>
</template>
<script>
	import {mapState, mapGetters} from 'vuex'
	const removeDuplicateObj = (arr) => {
		let obj = {};
		arr = arr.reduce((newArr, next) => {
			obj[next.audio_id] ? "" : (obj[next.audio_id] = true && newArr.push(next));
			return newArr;
		}, []);
		return arr;
	};
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				noiseData: []
			};
		},
		onLoad() {
			this.noiseData = this.$store.state.noiseList;
		},
		methods:{
			toTrain(d){
				uni.navigateTo({
					url:'/pagesA/pages/audio/audio',
					success: (res) => {
						res.eventChannel.emit('datas', d)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		padding-top: 30rpx;
	}
	.block{
		background-color: #fff;
		padding: 10px;
		border-radius: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 2px 2px 8px 0px #d9ebeb;
		margin-bottom: 16px;
	}
	.test-pic {
		height: 80px;
		width: 80px;
		border-radius: 16px;
	}
	
	.test-info {
		width: 50%;
	}
	
	.test-name {
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		color: #2E2E2E;
		font-weight: bold;
	}
	
	.test-des {
		line-height: 15px;
		height: 45px;
		font-size: 12px;
		color: #969696;
		font-weight: 500;
	}
	
	.start {
		width: 70px;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
		text-align: center;
		font-size: 12px;
		font-weight: 500;
		color: #fff;
		background-image: linear-gradient(to right, #0b2bff, #1e7fff);
	}
</style>
